<template>
	<view class="box">
		<view class="box-con">
			<view class="box-con-title">验证码</view>
			<input @input="inputYzm" class="box-con-input" maxlength="6" placeholder="请填写验证码" type="number"
				v-model="yzm" />
			<view class="box-con-text">
				<text class="obtain-yzm" v-if="isShow" @click="getVerification">获取验证码</text>
				<text class="count-down" v-else>{{time}}秒后重试</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		httpGetCode
	} from '@/api/http/login/login.js'

	export default {
		props: ['phone'],
		data() {
			return {
				yzm: '',
				isShow: true,
				time: 60
			}
		},
		methods: {
			inputYzm() {
				this.$emit('changeYzm', this.yzm)
			},
			//获取验证码
			getVerification() {
				//手机号检验
				var reg = /^1[0-9]{10,10}$/;
				if (!this.phone || !reg.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}

				//开始倒计时
				this.isShow = false
				this.timeDown()
				//发起获取验证码请求

				httpGetCode(this.phone).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					uni.$showMsg('验证码发送成功！')
				})

			},
			//验证码倒计时
			timeDown() {
				if (this.time > 0) {
					this.time--;
					setTimeout(this.timeDown, 1000);
				} else {
					this.isShow = true;
					this.time = 60;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box-con {
		width: 92%;
		margin-left: 4%;
		border-bottom: 2rpx solid #eee;
		display: flex;
		height: 100rpx;


		.box-con-title {
			width: 20%;
			line-height: 100rpx;
			font-size: 32rpx;
			font-weight: 550;
		}

		.box-con-input {
			width: 50%;
			font-size: 32rpx;
			height: 50rpx;
			margin-top: 25rpx;
		}

		.box-con-text {
			width: 30%;
			height: 80rpx;
			line-height: 80rpx;
			margin-top: 10rpx;
			font-size: 28rpx;
			background-color: #F39801;
			text-align: center;
			border-radius: 40rpx;

			text {
				color: #fff;
			}
		}
	}
</style>
